import React, { useState } from "react";
import { View, Text, StyleSheet, ImageBackground } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import DateTimePickerModal from "react-native-modal-datetime-picker";
import '../../common/global';


const timeGet = () => {
    const date = new Date(parseInt(Date.now()))
    var hours = date.getHours();
    var minutes = date.getMinutes();
    if (hours < 10) {
        hours = "0" + hours;
    }
    if (minutes < 10) {
        minutes = "0" + minutes;
    }
    // const seconds = date.getSeconds();
    return `${hours}:${minutes}`
}

const Rest = ({ navigation, route }) => {

    const [isTimePickerVisible, setTimePickerVisibility] = useState(false);
    const [time, setTime] = useState(`${timeGet()}`)


    const showTimePicker = () => {
        setTimePickerVisibility(true);
    };

    const hideTimePicker = () => {
        setTimePickerVisibility(false);
    };

    const handleConfirm = (time) => {
        // console.warn("A time has been picked: ", time);
        // console.log(time)
        const date = new Date(time)
        var hours = date.getHours();
        var minutes = date.getMinutes();
        if (hours < 10) {
            hours = "0" + hours;
        }
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        // const seconds = date.getSeconds();
        setTime(`${hours}:${minutes}`)
        hideTimePicker();
    };

    return (
        <View style={styles.rest}>
            <TouchableOpacity onPress={() => { showTimePicker() }}>
                <ImageBackground imageStyle={{ borderRadius: 20 }} source={require('../../Image/rest2.png')} style={styles.restStyle} resizeMode='cover'>
                    <View style={styles.word1}>
                        <Text style={styles.titleStyle}>休息一下</Text>
                    </View>
                    <View style={styles.word2}>
                        <Text style={styles.textStyle}>{time}起床</Text>
                    </View>
                </ImageBackground>
            </TouchableOpacity>
            <TouchableOpacity>
                <ImageBackground imageStyle={{ borderRadius: 20 }} source={require('../../Image/rest1.png')} style={styles.restStyle} resizeMode='cover'>
                    <View style={styles.word1}>
                        <Text style={styles.titleStyle}>小憩</Text>
                    </View>
                    <View style={styles.word2}>
                        <Text style={styles.textStyle}>07:15起床</Text>
                    </View>
                </ImageBackground>
            </TouchableOpacity>
            <DateTimePickerModal
                isVisible={isTimePickerVisible}
                mode="time"
                onConfirm={handleConfirm}
                onCancel={hideTimePicker}
            />
        </View>
    )
}

const styles = StyleSheet.create({
    rest: {
        marginTop: ptd(20),
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    restStyle: {
        width: 200,
        height: 100,
        marginLeft: 10,
        marginRight: 10,
    },
    word1: {
        width: '80%',
        marginTop: 20,
        marginLeft: 20,
    },
    word2: {
        width: '80%',
        marginTop: 10,
        marginLeft: 20,
    },
    titleStyle: {
        fontSize: 20,
        color: 'rgb(16,16,16)'
    },
    textStyle: {
        fontSize: 16,
        color: 'rgb(77,86,167)'
    }
})
export default Rest;

